<template>
  <div class="not-found">
    <el-row>
      <el-col :sm="24" :lg="24">
        <el-result icon="error" title="找不到资源" :subTitle="`${duration}s之后自动返回上一级`">
          <template #icon>
            <img alt="404" src="../../assets/image/404.png" />
          </template>
          <template #extra>
            <el-button type="primary" size="medium" @click="goBack">返回上一级</el-button>
            <el-button type="primary" size="medium" @click="goHome">返回首页</el-button>
          </template>
        </el-result>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import router from '../../router'
export default {
  data() {
    return {
      duration: 5,
      intervalIndex: null
    }
  },
  methods: {
    init() {
      this.intervalIndex = setInterval(() => {
        this.duration = this.duration - 1
        if (this.duration <= 0) {
          this.goBack()
        }
      }, 1000)
    },
    goBack() {
      if (this.intervalIndex !== null) {
        clearInterval(this.intervalIndex)
      }
      router.go(-1)
    },
    goHome() {
      if (this.intervalIndex !== null) {
        clearInterval(this.intervalIndex)
      }
      router.push('/')
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.not-found {
  margin: 0;
  padding: 0;

  img {
    width: 300px;
  }
}
</style>
